<template>
  <div class="c-fs34 c-wb-ba">
    <div
      class="c-fs34"
    >
      <div
        :class="
          moreQue && showmoTest ? '' : 'c-maxh174 c-text-hidden maxMask'
        "
      >
        <div ref="bigProblem" class="c-wb-ba">
          <span class="c-lh36 c-fs34 c-inlineblack c-fw600 c-ws-n c-mr8 fl">{{ bigNumber+1 }}.</span>
          <span
            class="c-lh36 c-fs26 c-lh40 c-fc-xblack imgInlineb problemdDom"
            v-html="problemDate.questionDetail.problem"
          ></span>
        </div>
      </div>
      <div class="c-flex-row c-justify-end c-w100 c-mt6" v-if="showmoTest&&showBtn">
        <div
          class="theme-fc c-fs20"
          @click="showMoreQue"
        >
          {{ moreQue ? "收起" : "展开"
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "problem",
  props: {
    problemDate: {
      type: Object,
      default: null
    },
    isShowAll: {
      type: Boolean,
      default: false
    },
    bigNumber: {
      type: Number,
      default: 0
    },
    isMaskAll: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showmoTest:false,
      moreQue:false,
      showBtn:true
    };
  },
  watch: {
    isShowAll(val) {
      if (val) {
        this.showDescHeight()
      }
    }
  },
  mounted() {
      this.showDescHeight()
  },
  methods: {
    showMoreQue() {
      this.moreQue = !this.moreQue
    },
    showDescHeight() {
      if (this.isMaskAll) {
        this.showmoTest = true
        this.moreQue = true
        this.showBtn = false
        return
      }
      this.$nextTick(() => {
        let problem = this.problemDate.questionDetail.problem
        let showProblem = problem.search("<img") == -1 ? false : true
          //获取当前内容的行高，超过3行则显示更多
          if (showProblem) {
            this.showmoTest = true
          } else {
            console.log(this.bigNumber, this.$refs.bigProblem.offsetHeight, !!this.$refs.bigProblem && this.$refs.bigProblem.offsetHeight < 83)
            if (!!this.$refs.bigProblem && this.$refs.bigProblem.offsetHeight < 83) {
              this.showmoTest = false
            } else {
              this.showmoTest = true
            }
          }
      })
    }
  },
  destroyed() {
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
</style>
